<div class="w-full h-[calc(100dvh-10.5rem)] md:h-[calc(100dvh-11.65rem)] overflow-y-auto border rounded-lg enclosing-container">

  <div class="px-4 pt-4 pb-2">
    <div class="flex items-center gap-2 pb-4 pt-4">
      <p class="text-lg ">Book Cover Image</p>
      <i class="pi pi-info-circle text-sky-600"
         pTooltip="Settings related to book cover images, such as resolution and regeneration options."
         tooltipPosition="right"
         style="cursor: pointer;">
      </i>
    </div>

    <div class="grid grid-cols-[auto,1fr] pl-6 gap-y-4 gap-x-4 items-center">
      <p class=" py-1">Resolution:
        <i class="pi pi-info-circle text-sky-600"
           pTooltip="Sets the resolution for generated cover images. Higher resolutions produce sharper covers but increase file size. Applies only to future books unless covers are regenerated."
           tooltipPosition="right"
           style="cursor: pointer;">
        </i>
      </p>
      <div class="flex gap-4 justify-start">
        <p-select
          [options]="resolutionOptions"
          [(ngModel)]="selectedResolution"
          (ngModelChange)="onResolutionChange()"
          placeholder="Select Resolution">
        </p-select>
      </div>

      <p class=" py-1">Regenerate Covers?
        <i class="pi pi-info-circle text-sky-600"
           pTooltip="Regenerates cover images for all EPUB and PDF books (excluding locked ones) using the selected resolution."
           tooltipPosition="right"
           style="cursor: pointer;">
        </i>
      </p>
      <p-button
        label="Regenerate"
        outlined="true"
        (onClick)="regenerateCovers()"></p-button>
    </div>
  </div>

  <div class="pt-2 pb-4">
    <p-divider></p-divider>
  </div>

  <div class="grid grid-cols-[auto,1fr] pl-6 gap-y-4 gap-x-4 items-center">
    <p class="text-lg pb-4">Auto Book Search
      <i class="pi pi-info-circle text-sky-600"
         pTooltip="Automatically attempts metadata matching when the book information panel is opened."
         tooltipPosition="right"
         style="cursor: pointer;">
      </i>
    </p>
    <div class="flex gap-4 justify-start">
      <p-toggleswitch
        [(ngModel)]="toggles.autoBookSearch"
        (onChange)="onToggleChange('autoBookSearch', $event.checked)"
      />
    </div>

    <p class="text-lg pb-4">Similar Book Recommendation
      <i class="pi pi-info-circle text-sky-600"
         pTooltip="Enables or disables similar book recommendations based on your library."
         tooltipPosition="right"
         style="cursor: pointer;">
      </i>
    </p>
    <div class="flex gap-2 justify-start">
      <p-toggleswitch
        [(ngModel)]="toggles.similarBookRecommendation"
        (onChange)="onToggleChange('similarBookRecommendation', $event.checked)"
      />
    </div>
  </div>

  <div class="pt-2 pb-4">
    <p-divider></p-divider>
  </div>

  <div class="grid grid-cols-[auto,1fr] pl-6 gap-y-4 gap-x-4 items-center">
    <p class="text-lg pb-4">Max File Upload Size:
      <i class="pi pi-info-circle text-sky-600"
         pTooltip="Defines the maximum allowed size (in MB) for each uploaded file. Applies to EPUB, PDF, CBZ, CBR, and CB7 formats."
         tooltipPosition="right"
         style="cursor: pointer;">
      </i>
    </p>
    <div class="flex gap-4 items-center">
      <div class="relative w-28">
        <input
          type="text"
          pInputText
          [(ngModel)]="maxFileUploadSizeInMb"
          class="pr-10 w-full min-w-24"
          placeholder="Max size"/>
        <span class="absolute right-2 top-1/2 -translate-y-1/2 text-gray-500 text-sm pointer-events-none">MB</span>
      </div>
      <p-button label="Save" outlined (onClick)="saveFileSize()"></p-button>
      <div class="text-sm text-gray-400 flex items-start gap-2">
        <i class="pi pi-exclamation-triangle text-yellow-500 mt-0.5"></i>
        <span>
          Changes will take effect after restarting the server
        </span>
      </div>
    </div>
    <p class="text-lg pb-4 ">CBX Cache Size:
      <i class="pi pi-info-circle text-sky-600"
         pTooltip="Limits the total size (in MB) of the CBX image cache. If exceeded, older cache entries are removed automatically."
         tooltipPosition="right"
         style="cursor: pointer;">
      </i>
    </p>
    <div class="flex gap-4 items-center">
      <div class="relative w-28">
        <input
          type="text"
          pInputText
          [(ngModel)]="cbxCacheValue"
          class="pr-10 w-full  min-w-24"
          placeholder="Cache size"/>
        <span class="absolute right-2 top-1/2 -translate-y-1/2 text-gray-500 text-sm pointer-events-none">MB</span>
      </div>
      <p-button label="Save" outlined (onClick)="saveCacheSize()"></p-button>
    </div>
  </div>

  <div class="pt-2 pb-4">
    <p-divider></p-divider>
  </div>

  <div class="px-4 py-2">
    <app-file-upload-pattern></app-file-upload-pattern>
  </div>

</div>
